<template>
  <div>
    <!-- 添加搜索框 -->
    <div class="serach">
      <!-- 查找名字 -->
      <form-input
        class="searchInput"
        placeholder=" 输入要查找的用户"
        v-model="filterText"
        @blur="handleCurrentChange(1)"
      >
      </form-input>

      <el-select
        v-model="filterType"
        placeholder="请选择分配状态"
        @change="result"
      >
        <el-option label="全部" value=""></el-option>
        <el-option
          v-for="status in statuses"
          :key="status"
          :value="status"
        ></el-option>
      </el-select>

      <el-select
        style="margin-left: 30px"
        v-model="subjectsType"
        placeholder="请选择学习方向"
        @change="subDirection"
      >
        <el-option label="全部" value=""></el-option>
        <el-option
          v-for="subject in subjects"
          :key="subject.subjectId"
          :value="subject.name"
        ></el-option>
      </el-select>
      <el-button type="primary" @click="sendNote()" class="sendNote">
        <i class="el-icon-share"></i> 发送通知</el-button
      >
    </div>
    <!-- 显示用户列表 -->
    <div class="content">
      <el-table
        ref="multipleTable"
        :default-sort="{ prop: 'status', order: 'descending' }"
        :data="filtedData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="id" label="ID" width="120"> </el-table-column>
        <el-table-column
          prop="username"
          label="姓名"
          width="120"
          @click="detaileInformation"
        >
        </el-table-column>
        <el-table-column label="性别" width="200">
          <template slot-scope="scope">
            <span v-if="scope.row.sex === 'female'">女</span>
            <span v-else-if="scope.row.sex === 'male'">男</span>
          </template>
        </el-table-column>
        <el-table-column label="分配状态" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.subjectId" style="color: green">已分配</span>
            <span v-if="!scope.row.subjectId" style="color: red">未分配</span>
          </template>
        </el-table-column>

        <el-table-column prop="subjectId" label="学习方向" width="200">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="medium"
              class="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)"
            ></el-button>
            <el-button
              type="text"
              size="medium"
              class="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row), open()"
            ></el-button>
            <el-button
              type="text"
              size="medium"
              class="el-icon-document"
              @click="detaileInformation(scope.$index, scope.row)"
            ></el-button>
            <el-button
              type="text"
              size="medium"
              class="el-icon-user"
              @click="lookPermission(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 用户详细信息表单 -->
    <div class="informate" v-show="formShow">
      <div class="InformationForm">
        <i class="el-icon-close" id="close" @click="close()"></i>
        <el-descriptions title="用户详细信息">
          <el-descriptions-item label="id">{{
            detailInfor.id
          }}</el-descriptions-item>
          <el-descriptions-item label="名称">{{
            detailInfor.username
          }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{
            detailInfor.sex
          }}</el-descriptions-item>
          <el-descriptions-item label="生日">{{
            detailInfor.birthday
          }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{
            detailInfor.telephone
          }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{
            detailInfor.email
          }}</el-descriptions-item>
          <el-descriptions-item label="部门">{{
            detailInfor.department
          }}</el-descriptions-item>
          <el-descriptions-item label="学校">
            <el-tag size="small">{{ detailInfor.college }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="专业">{{
            detailInfor.major
          }}</el-descriptions-item>
          <el-descriptions-item label="学科">{{
            detailInfor.subjectId
          }}</el-descriptions-item>
          <el-descriptions-item label="学期">{{
            detailInfor.issue
          }}</el-descriptions-item>
          <!-- <el-descriptions-item label="积分">{{
            detailInfor.point
          }}</el-descriptions-item> -->
          <el-descriptions-item label="权限">{{
            detailInfor.privilege
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <!-- 编辑分配表单 -->
    <div class="editBackground" v-show="editShow">
      <div class="editTable">
        <f-form
          ref="form"
          :model="setForm"
          label-width="80px"
          size="medium"
          class="editForm"
          @submit.native.prevent
        >
          <p>{{ setForm.username }} 的个人信息</p>
          <form-item label="用户部门" prop="department">
            <form-input
              v-model="setForm.department"
              name="department"
            ></form-input>
          </form-item>
          <form-item label="学科方向" prop="subjectId">
            <el-select v-model.number="setvalue" placeholder="请选择方向">
              <el-option
                v-for="(subject, index) in subjects"
                :key="index"
                :label="subject.name"
                :value="index + 1"
              >
              </el-option>
            </el-select>
          </form-item>
          <form-item label="用户权限" prop="privilege">
            <el-select
              v-model="setForm.privilege"
              placeholder="请选择权限"
              name="privilege"
              class="userPrivilege"
            >
              <el-option
                v-for="(p, index) in UserPrivilege"
                :key="index"
                :label="p"
                :value="p"
              >
              </el-option>
            </el-select>
          </form-item>
          <form-item size="large" class="footbtn">
            <alter-button type="primary" @click="onSubmit()">提交</alter-button>
            <alter-button @click="cancle" style="margin-left: 30px"
              >取消</alter-button
            >
          </form-item>
        </f-form>
      </div>
    </div>
    <!-- 分页展示 -->
    <div class="pages">
      <!-- 动态添加页码 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="userDataLength"
        :page-size="pagesize"
        :pager-count="5"
        :current-page="currentPage"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <!-- 发送通知表单 -->
    <div class="sendUserBgc" v-show="sendFormShow">
      <f-form
        :model="sendUserForm"
        ref="sendUserForm"
        label-width="100px"
        class="sendUser-ruleForm"
      >
        <div class="sendRoleTitle">发送通知</div>
        <el-divider class="upperEdge"></el-divider>
        <div class="sendNoteContent">
          <div class="noteInnerBox">
            <form-item label="通知内容" prop="region" class="sendInner">
              <form-input
                type="textarea"
                v-model="noteForm.note"
                name="note"
                class="noteForm-note"
                resize="none"
              ></form-input>
            </form-item>
          </div>
          <div class="tabsBox">
            <nav-tabs v-model="activeName" @tab-click="handleClick">
              <nav-tab-pane label="成员" name="first">
                <form-input
                  class="searchUser"
                  placeholder="搜索成员"
                  v-model="filterSearch"
                >
                </form-input>
                <el-checkbox
                  :indeterminate="isIndeterminate"
                  v-model="checkAll"
                  @change="handleCheckAllChange"
                  class="checkBoxUser"
                  >全选</el-checkbox
                >
                <div style="margin: 15px 0"></div>
                <el-checkbox-group
                  v-model="checkedUser"
                  @change="handleCheckedUserChange"
                  class="checkboxGroup"
                >
                  <ul
                    class="user-list"
                    v-infinite-scroll="load"
                    style="overflow: auto"
                  >
                    <el-checkbox
                      v-for="user in Users"
                      :label="user.id"
                      :key="user.id"
                      >{{ user.username }}</el-checkbox
                    >
                  </ul>
                </el-checkbox-group>
              </nav-tab-pane>
              <nav-tab-pane label="方向" name="second">
                <el-checkbox-group
                  v-model="checkedDirection"
                  class="directions"
                >
                  <ul
                    class="direction-list"
                    v-infinite-scroll="load"
                    style="overflow: auto"
                  >
                    <el-checkbox
                      v-for="dire in direction"
                      :label="dire.subjectId"
                      :key="dire.subjectId"
                      >{{ dire.name }}</el-checkbox
                    >
                  </ul>
                </el-checkbox-group>
              </nav-tab-pane>
              <nav-tab-pane label="项目组" name="third">
                <el-checkbox-group v-model="checkedItem" class="directions">
                  <ul
                    class="direction-list"
                    v-infinite-scroll="load"
                    style="overflow: auto"
                  >
                    <el-checkbox
                      v-for="item in itemGroup"
                      :label="item.id"
                      :key="item.id"
                      >{{ item.name }}</el-checkbox
                    >
                  </ul>
                </el-checkbox-group>
              </nav-tab-pane>
            </nav-tabs>
          </div>
        </div>
        <el-divider class="lowerEdge"></el-divider>
        <form-item class="addButton">
          <el-button @click="cancleForm('addUserForm')">取消</el-button>
          <el-button type="primary" @click="determineForm('addUserForm')"
            >确定</el-button
          >
        </form-item>
      </f-form>
    </div>
    <!-- 查看角色 -->
    <div class="watchPermissionBgc" v-show="permissionShow">
      <f-form
        :model="lookUserForm"
        ref="lookUserForm"
        label-width="100px"
        class="lookUser-ruleForm"
      >
        <i class="el-icon-close" id="close" @click="close()"></i>
        <div class="sendRoleTitle"><i class="el-icon-star-on"></i>用户角色</div>
        <el-divider></el-divider>
        <el-transfer
          v-model="lookvalue"
          :data="lookdata"
          class="editePermission"
          :titles="['未拥有的角色', '已拥有的角色']"
          @change="handleChange"
        ></el-transfer>
      </f-form>
    </div>
  </div>
</template>

<script>
import request from '@/api/utils/requery'
import {
  SendNoteAPI,
  DeleteUserAPI,
  UpdateUserAPI,
  SelectUserAPI,
  SearchUserAPI,
  WatchAllUserAPI,
  AddUserChaAPI,
  RemoveUserChaAPI,
  GetAllSubjectAPI,
  GetProjectItemAPI,
  AllUsersAPI,
} from "@/api/utils";
export default {
  data() {
    return {
      // lookdata: generateData(),
      lookdata: [],
      lookvalue: [],
      userDataLength: 0,
      filtedData: [],
      url:"//124.71.219.15:8083//management_system/websocket/",
      // 全部数据
      // allDatabase: [],
      // 查找的用户
      filterText: "",
      sendFormShow: false,
      // 查看角色表单
      permissionShow: false,
      // 目前选择的分配状态
      allotStatus: "",
      // 当前选择的 id
      currentSubjectId: "",
      // 发送通知的人
      sendUserForm: {}, //原来是字符串
      lookUserForm: {},
      // 分配方向状态值
      statuses: ["已分配", "未分配"],
      //分配状态值
      filterType: "", //下拉框的值
      userData: [],
      subjectsType: "", // 学科方向
      // 设置动态获取
      subjects: [],
      subjectDate: [],
      dialogVisible: false,
      filterSearch: "",
      noteForm: {
        note: "",
      },
      activeName: "first",
      isIndeterminate: true,
      checkAll: false,
      checkedUser: [],
      allUsers: [],
      checkedDirection: [],
      direction: [],
      checkedItem: [],
      itemGroup: [],
      // 分配方向时的选项
      setvalue: "",
      array: {},
      setForm: {
        id: "",
        username: "",
        department: "",
        subjectId: "",
        privilege: "",
      },
      detailInfor: [],
      pagesize: 7, // 一页的数据量
      currentPage: 1, // 当前的页数
      message: "",
      // 是否展示详细列表
      formShow: false,
      // 用户权限
      UserPrivilege: ["S", "T"],
      editShow: false,
      websocket: null,
    };
  },
  // 注入依赖
  inject: ["reload"],
  methods: {
    cancleForm() {
      this.sendFormShow = false;
      this.websocket.close();
      this.$message.error("链接已断开！");
    },
    // 点击提交表单
    determineForm() {
      var user = [];
      var users = "";
      var managerName = "卿艾迪";
      var content = this.noteForm.note;
      var sum = 0;
      if (this.activeName == "first") {
        user = this.checkedUser;
        user.forEach((e) => {
          users += e + ",";
        });
        users = users.substring(0, users.length - 1);
        this.sendAllNote(managerName, content, users);
      } else if (this.activeName == "second") {
        var subjects = this.checkedDirection;
        subjects.forEach((el) => {
          request({
            method:'post',
            url:`user/getUsersBySubject?id=${el}`
          }).then(res=>{
            if (res.data.flag) {
                user = user.concat(res.data.data);
                users = user.join(",");
                sum++;
                if (sum == subjects.length) {
                  this.sendAllNote(managerName, content, users);
                }
              } else {
                this.$message.error("获取学科用户失败!");
              }
          })
        });
      } else {
        var projectId = this.checkedItem;
        projectId.forEach((el) => {
          request({
            method:'post',
            url:`project/selectUserToProject?projectId=${el}`
          }).then(res=>{
            if (res.data.flag) {
                user = res.data.data;
                user.forEach((el) => {
                  users += el.userId + ",";
                });
                users = users.substring(0, users.length - 1);
                sum++;
                if (sum == projectId.length) {
                  this.sendAllNote(managerName, content, users);
                }
              } else {
                this.$message.error("获取项目用户失败!");
              }
          })
        });
      }
    },
    // 发送通知
    async sendAllNote(managerName, content, users) {
      if(!content){
        this.$message.error("内容不能为空！")
      }else{
        return SendNoteAPI(managerName, content, users).then((res) => {
        if (res.data.flag) {
          let message = res.data.data;
          this.websocket.send(message);
          this.$message.success("消息发送成功！");
          this.sendFormShow = false;
          this.noteForm.note = "";
          this.checkedUser = [];
          this.checkedDirection = [];
          this.checkedItem = [];
          this.websocket.close();
        } else {
          this.$message.error("发送失败!");
        }
      });
      }
      
    },
    // 标签页切换
    handleClick() {
      this.checkAll = false;
      this.checkedUser = [];
      this.checkedDirection = [];
      this.checkedItem = [];
    },
    // 发送通知
    sendNote() {
      this.sendFormShow = true;
      let userno = "卿艾迪";
      // 判断当前浏览器是否支持 WebSocket
      if ("WebSocket" in window) {
        this.websocket = new WebSocket(
         `ws:${this.url}` + userno
        );
      } else {
        this.$message.error("当前浏览器 Not support websocket");
      }
      let that = this;
      this.websocket.onopen = function () {
        that.$message.success("已连接!");
      };
      this.websocket.onerror = function () {
        that.$message.error("连接错误!");
      };
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 学科名
    subjectName(code) {
      // 传过来的是数字 -1为索引 通过索引返回值
      // let arr = this.subjects;
      // if (code) {
      let num = code - 1;
      return this.subjects[num].name;
    },
    // 点击文档弹出详细信息
    detaileInformation(index, row) {
      this.formShow = true;
      this.detailInfor = row;
    },
    // 点击关闭
    close() {
      this.formShow = false;
      this.permissionShow = false;
    },
    // 编辑按钮
    handleEdit(index, row) {
      this.array = {};
      for (let i in row) {
        if (i !== "privilege" && i !== "subjectId" && i !== "department") {
          this.array[i] = row[i];
        }
      }
      this.editShow = true;
      this.setForm.id = row.id;
      this.setForm.username = row.username;
      this.setForm.department = row.department;
      // console.log(this.setvalue);
      this.setvalue = row.subjectId;
      this.setForm.privilege = row.privilege;
      // console.log(row);
    },
    // 删除判断
    open() {
      this.$confirm("此操作将该用户删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.DeleteUser();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
          this.reload();
        });
    },
    // 获取删除用户的 id
    handleDelete(index, row) {
      this.userId = row.id;
    },
    // 删除按钮
    async DeleteUser() {
      return DeleteUserAPI(this.userId).then((res) => {
        if (res.data.flag) {
          this.editShow = false;
          this.reload();
          this.$message.success("删除成功!");
        } else {
          this.$message.error("删除失败!");
        }
      });
    },
    // 修改用户信息
    async onSubmit() {
      // 如果它没有更改学科
      let pos = this.subjects.indexOf(this.setvalue, pos);
      if (pos === -1) {
        this.array["subjectId"] = this.setvalue;
      } else {
        this.array["subjectId"] = pos + 1;
      }
      this.array["privilege"] = this.setForm.privilege;
      this.array["department"] = this.setForm.department;
      //把对象转换为 jsonp 格式
      let Finally = JSON.stringify(this.array);
      return UpdateUserAPI(Finally).then((res) => {
        if (res) {
          this.reload();
          this.$message.success("信息修改成功!");
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    },
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.pagesize = val;
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1;
    },
    // 下拉框选择完后
    result(v) {
      if (v == "已分配") {
        this.allotStatus = "a";
      } else if (v == "未分配") {
        this.allotStatus = "b";
      } else {
        this.allotStatus = "";
      }
      this.handleCurrentChange(1);
    },
    // 选择学科
    subDirection(v) {
      if (v) {
        this.subjects.forEach((e) => {
          if (e.name == v) {
            this.currentSubjectId = e.subjectId;
          }
        });
      } else {
        this.currentSubjectId = "";
      }
      this.handleCurrentChange(1);
    },
    // 显示第几页
    async handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val;
      return SelectUserAPI(
        this.currentSubjectId,
        this.allotStatus,
        this.filterText,
        this.currentPage,
        this.pagesize
      ).then((res) => {
        if (res.data.flag) {
          this.userDataLength = res.data.data.page.pageTotal;
          let user = res.data.data.list;
          // this.allDatabase = user;
          this.filtedData = user;
          // 将后端数据转为汉字
          this.filtedData.forEach((item) => {
            // item.status = this.statuName(item.status);
            if (item.subjectId) {
              item.subjectId = this.subjectName(item.subjectId);
            }
          });
        } else {
          this.$message.error("数据查询失败！");
        }
      });
    },
    // 全选成员
    handleCheckAllChange(val) {
      if (val) {
        this.Users.forEach((e) => {
          this.checkedUser.push(e.id);
        });
      } else {
        this.checkedUser = [];
      }
      this.isIndeterminate = false;
    },
    handleCheckedUserChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.Users.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.Users.length;
    },
    // 滚动条
    load() {
      this.count += 2;
    },
    // 查看角色
    async lookPermission(index, rows) {
      this.permissionShow = true;
      this.permissionId = rows.id;
      this.lookvalue = [];
      this.lookdata = [];
      // console.log(rows.id);
      // 获取已拥有的角色
      return SearchUserAPI(this.permissionId).then((res) => {
        if (res.data.flag) {
          res.data.data.forEach((item) => {
            this.lookvalue.push(item.roleId);
          });
          // 查看所有角色
          return WatchAllUserAPI().then((res) => {
            if (res.data.flag) {
              let arr = res.data.data;
              arr.forEach((item) => {
                this.lookdata.push({
                  key: item.roleId,
                  label: item.roleName,
                });
              });
            } else {
              this.$message.error("角色获取失败！");
            }
          });
        } else {
          this.$message.error("角色获取失败！");
        }
      });
    },
    // 为一个用户添加/移除一个角色
    async handleChange(value, direction, movedKeys) {
      // this.lookvalue = value;
      if (direction == "right") {
        let Finally = JSON.stringify(movedKeys);
        return AddUserChaAPI(this.permissionId, Finally).then((res) => {
          if (res.data.flag) {
            this.$message.success("增加角色成功");
          } else {
            this.$message.error("增加角色失败");
          }
        });
      } else {
        let Finally = JSON.stringify(movedKeys);
        return RemoveUserChaAPI(this.permissionId, Finally).then((res) => {
          if (res.data.flag) {
            this.$message.success("移除角色成功");
          } else {
            this.$message.error("移除角色失败");
          }
        });
      }
    },
  },
  computed: {
    Users() {
      const filterSearch = this.filterSearch;
      if (filterSearch) {
        return this.allUsers.filter((data) => {
          return Object.keys(data).some((key) => {
            if (key == "username") {
              return String(data[key]).indexOf(filterSearch) > -1;
            }
          });
        });
      }
      return this.allUsers;
    },
  },
  async mounted() {
    // 获取所有学科
    const res = await GetAllSubjectAPI();
    if (res.data.flag) {
      this.direction = this.subjects = res.data.data;
      this.handleCurrentChange(1);
    } else {
      this.$message.error("学科查询失败！");
    }
    // 获取项目组
    const res1 = await GetProjectItemAPI();
    if (res1.data.flag) {
      this.itemGroup = res1.data.data;
    } else {
      this.$message.error("项目查询失败！");
    }
    // 获取所有用户
    const res2 = await AllUsersAPI();
    if (res2.data.flag) {
      this.allUsers = res2.data.data;
    } else {
      this.$message.error("用户查询失败！");
    }
  },
};
</script>

<style scoped>
.content {
  margin-top: 20px;
}
.sendNote {
  float: right;
  height: 38px;
}
/* .el-table .el-table__cell {
  padding: 7px 10px !important;
  text-align: center !important;;
} */
.el-table /deep/ th,
.el-table /deep/ td {
  padding: 7px 4px;
  text-align: center;
}
.content /deep/.el-table tr,
.content /deep/.el-table th.el-table__cell,
.content /deep/.el-table {
  background-color: rgba(255, 255, 255, 0.3);
}
.editBackground,
.watchPermissionBgc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 98;
  background-color: rgba(0, 0, 0, 0.5);
}
.editTable {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  height: 455px;
  /* max-height: 300px; */
  padding: 10px 67px;
  background-color: white;
  border-radius: 8px;
  box-sizing: border-box;
  z-index: 99;
}
.editTable /deep/ .el-form-item__label {
  line-height: 55px;
}
.editTable /deep/.el-input {
  width: 100%;
}
.editTable /deep/.el-textarea {
  width: 65%;
}
.userPrivilege::before {
  content: "( S: 会员用户 T: 管理员用户 )";
  font-size: 10px;
  color: #ccc;
  position: absolute;
  top: 40px;
  left: 15px;
}
.footbtn {
  margin-top: 40px;
}
.pages {
  position: absolute;
  left: 50%;
  bottom: 50px;
}
/* 详细信息表单 */
.InformationForm {
  overflow: hidden;
  position: absolute;
  width: 680px;
  height: 200px;
  /* background-color:rgba(212, 241, 248, 1); */
  background: linear-gradient(#a7deeb 0%, #d2d5d6 100%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  box-shadow: 0px 0px 10px rgba(109, 113, 114, 0.5);
}
.InformationForm /deep/ .el-descriptions__body {
  background-color: transparent;
}
.informate {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 720px;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10;
}
#close {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 20px;
  cursor: pointer;
  color: #ccc;
}
/* 发送通知表单设置 */
.sendUserBgc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 98;
  background-color: rgba(0, 0, 0, 0.5);
}
.sendUser-ruleForm,
.lookUser-ruleForm {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 588px;
  max-height: 512px;
  /* padding: 10px 67px; */
  background-color: white;
  border-radius: 10px;
  box-sizing: border-box;
  z-index: 99;
}
.lookUser-ruleForm {
  height: 415px;
  width: 546px;
}
.sendRoleTitle {
  width: 100%;
  padding: 15px 0 0 20px;
}
.sendNoteContent {
  display: flex;
  height: 300px;
}
.noteInnerBox {
  height: 100%;
  border-right: 1px solid #ccc;
}
.sendInner {
  margin-right: 10px;
}
.tabsBox {
  flex: 1;
}
.tabsBox /deep/.el-tabs__nav-scroll {
  padding-left: 26px;
}
.searchUser {
  width: 232px;
}
.checkBoxUser {
  margin-left: 10px;
}
.checkboxGroup {
  margin-left: 10px;
}
.noteForm-note /deep/ .el-textarea__inner {
  margin-top: 20px;
  height: 268px;
  overflow: hidden;
  margin-right: 5px;
}
.sendNoteContent /deep/.el-form-item {
  margin-bottom: 0;
}
.sendInner /deep/ .el-form-item__label {
  line-height: 60px;
}
/* 分割线 */
.upperEdge {
  margin-bottom: 0;
}
.lowerEdge {
  margin-top: 0;
}
.user-list {
  padding: 0;
  height: 135px;
}
.directions {
  margin-left: 30px;
}

.direction-list {
  height: 233px;
  padding: 0;
}
.direction-list /deep/.el-checkbox__label {
  line-height: 32px;
}
.user-list /deep/.el-checkbox__label {
  padding-left: 14px;
  line-height: 32px;
}
.addButton {
  padding-left: 18%;
}
.el-icon-star-on {
  color: rgb(233, 233, 24);
  margin-right: 5px;
}
.editePermission {
  margin-left: 25px;
}
</style>